<template>
  <div class="post-comment">
    <template v-if="show">
      <el-input
        :type="textarea.type"
        :autosize="textarea.autosize"
        :placeholder="textarea.placeholder"
        clearable
        v-model="comment">
      </el-input>
      <div class="post-btn">
        <el-button
          :type="btn.type"
          :disabled="!comment"
          :loading="btn.loading"
          @click="onBtnClick"
        >{{ btn.text }}</el-button>
      </div>
    </template>
  </div>
</template>

<style>
  .post-comment {
    width: 100%;
  }
  .post-btn {
    margin-top: 14px;
    float: right;
  }
  .post-comment::after {
    content: '';
    display: block;
    height: 0;
    clear: both;
  }
</style>

<script>
export default {
  name: 'postComment',
  props: {
    id: {
      type: [String, Number],
      default: ''
    },
    show: {
      type: Boolean,
      default: false
    },
    textarea: {
      type: Object,
      default: () => { return {}; }
    },
    btn: {
      type: Object,
      default: () => { return {}; }
    },
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      comment: ''
    };
  },
  watch: {
    content(value) {
      this.comment = value;
    }
  },
  methods: {
    onBtnClick() {
      if (!this.comment || !this.btn || this.btn.loading) {
        return;
      }
      this.$emit('post-comment', this.comment, this.id);
    }
  }
};
</script>


